import request from '../../../utils/request'
// 小程序中如果想使用第三方包参数文档,需要进行一些配置
// npm install pubsub-js --save   pubsub 需要额外安装
import PubSub from 'pubsub-js'
// npm install moment             moment 需要额外安装
import moment from 'moment'

// 获取全局 APP 实例
const appInstance = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 标识音乐是否播放
    isPlay: false,
    // 歌曲详情对象
    song: {},
    // 音乐 ID 
    musicId: '',
    // 当前音乐播放链接
    musicLink: '',
    // 实时播放的时长
    currentTime: '00:00',
    // 总时长
    durationTime: '00:00',
    currentWidth: '0'
  },
  // 点击播放或者暂停的回调
  handleMusicPlay(){
    const isPlay = !this.data.isPlay
    // this.setData({
    //   isPlay
    // })
    const {musicId,musicLink} = this.data
    this.musicControl(isPlay,musicId,musicLink)
  },
  // 封装控制音乐播放/暂停的功能函数
  async musicControl(isPlay,musicId,musicLink){
    if(isPlay){
      if(!musicLink){
        // 播放音乐,如果需要后台播放功能,则需要在 app.json 文件中设置 "requiredBackgroundModes": ["audio"] 属性
        // 获取音乐的播放地址
        const musicLinkData = await request('/song/url',{id: musicId})
        const musicLink = musicLinkData.data[0].url
        // 将获取到的音乐链接到 data 中
        this.setData({
          musicLink
        })
      }
      
      this.backgroundAudioManager.src = this.data.musicLink
      // 歌曲名称必须设置,否则不能播放
      this.backgroundAudioManager.title = this.data.song.name

      // 修改全局播放状态
      // appInstance.globalData.isMusicPlay = true
      // appInstance.globalData.musicId = musicId
    }else{
      // 暂停音乐
      this.backgroundAudioManager.pause()

      // 修改全局播放状态
      // appInstance.globalData.isMusicPlay = false
    }
  },
  // 获取音乐详情
  async getMusicInfo(musicId){ 
    const songData = await request('/song/detail',{ids: musicId})
    let durationTime = moment(songData.songs[0].dt).format('mm:ss')
    this.setData({
      song: songData.songs[0],
      durationTime
    })
    // 动态修改窗口标题
    wx.setNavigationBarTitle({
      title: this.data.song.name
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // options: 用来接收路由跳转的参数,默认值是空对象
    // console.log(options)

    // 获取音乐 id
    const musicId = options.musicId
    this.setData({
      musicId
    })
    this.getMusicInfo(musicId)

    // 当前页面的音乐是否在播放
    if(appInstance.globalData.isMusicPlay && appInstance.globalData.musicId === musicId){
      // 音乐在播放,修改当面页面的播放状态为 true
      this.setData({
        isPlay: true
      }) 
    }
    
    // 生成背景音频的实例
     this.backgroundAudioManager = wx.getBackgroundAudioManager()
    // 监听音乐播放/暂停/停止
    this.backgroundAudioManager.onPlay(() => {
      this.changeIsPlayState(true)
      appInstance.globalData.musicId = musicId
    })
    this.backgroundAudioManager.onPause(() => {
      this.changeIsPlayState(false)
    })
    this.backgroundAudioManager.onStop(() => {
      this.changeIsPlayState(false)
    })
    // 监听音乐自然播放结束
    this.backgroundAudioManager.onEnded(() => {
      // 自动切换到下一首,并且自动播放
      PubSub.publish('switchType','next'),
      // 还原数据
      this.setData({
        // 实时播放的时长
        currentTime: '00:00',
        // 总时长
        durationTime: '00:00',
        currentWidth: '0'
      })
    })

    // 监听音乐实时播放的进度
    this.backgroundAudioManager.onTimeUpdate(() => {
      // console.log('总时长',this.backgroundAudioManager.duration)
      // console.log('实时播放时长',this.backgroundAudioManager.currentTime)
      
      // 格式化实时播放的时长
      let currentTime = moment(this.backgroundAudioManager.currentTime * 1000).format('mm:ss')
      // 实时播放时间 / 总时长 = 进度条实时宽度 / 进度条总宽度
      let currentWidth = this.backgroundAudioManager.currentTime / this.backgroundAudioManager.duration * 450
      this.setData({
        currentTime,
        currentWidth
      })
    })
 
    // 订阅 recommendSong 页面发布的消息: musicId
    PubSub.subscribe('musicId',(msg,musicId) => {
      // 获取最新的音乐详情数据
      this.getMusicInfo(musicId)
      // 自动播放最新音乐
      this.musicControl(true,musicId)
    })
  },
  // 封装修改状态的功能函数
  changeIsPlayState(isPlay){
    this.setData({
      isPlay
    })
    appInstance.globalData.isMusicPlay = isPlay
  },
  // 点击切换歌曲的回调
  handleSwitch(event){
    // 获取切换歌曲的类型
    const type = event.currentTarget.id

    // 停止当前音乐的播放
    this.backgroundAudioManager.stop()

    // 将切换歌曲的类型发送给 recommendSong 页面
    PubSub.publish('switchType',type)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})